<template>
	<view>
		<view class="tabs">
			<liuyuno-tabs
				:tabData="tabs"
				:activeIndex="selectTabIndex"
				:config="{
					color: '#999',
					activeColor: '#FE7904',
					underLineColor: '#FE7904'
				}"
				@tabClick="selectTab"
			/>
		</view>
		<view>
			<view class="no-order" v-if="orderlist.length === 0">暂无订单</view>
			<view v-else class="swiper-item">
				<view v-for="item in orderlist" :key="item.Id" class="order-item-card" @click="orderdetail(item.Id)">
					<view class="order-no-top">
						<view class="order-no">{{ item.OrderNo }}</view>
						<view class="order-status">{{ item.PlayerOrderStatusText }}</view>
					</view>
					<view class="order-item-top">
						<view class="player-header"><view :style="{ backgroundImage: 'url( ' + item.CustomerHeadImg + ' )' }" class="player-header-img"></view></view>
						<view class="play-order-info">
							<view class="play-order-info-item">
								<view class="title">预约地址</view>
								<view class="content">{{ item.Address }}</view>
							</view>
							<view class="play-order-info-item">
								<view class="title">预约时间</view>
								<view class="content">{{ item.StartTime | timeFormat('yyyy-mm-dd hh:mm') }}</view>
							</view>
							<view class="play-order-info-item">
								<view class="title">结束时间</view>
								<view class="content">{{ item.EndTime | timeFormat('yyyy-mm-dd hh:mm') }}</view>
							</view>
							<view class="play-order-info-item">
								<view class="title">预约时长</view>
								<view class="content">{{ item.PlayerHours }}小时</view>
							</view>
						</view>
					</view>
					<view class="order-price">
						<text class="order-price-unit">￥</text>
						<text>{{ item.Fee | moneyFormat(2) }}</text>
					</view>
					<view class="order-operation-container">
						<view class="order-btn jiedan-btn" v-if="item.PlayerOrderStatus == 20" @click.stop="updateOrderStatus(item.Id, 30)">接单</view>
						<view class="order-btn judan-btn" v-if="item.PlayerOrderStatus == 20" @click.stop="updateOrderStatus(item.Id, -20)">拒单</view>
						<view class="order-btn jiedan-btn" v-if="item.PlayerOrderStatus == 30" @click.stop="updateOrderStatus(item.Id, 40)">开始服务</view>
						<view class="order-btn judan-btn" v-if="item.PlayerOrderStatus == 40" @click.stop="updateOrderStatus(item.Id, 50)">结束服务</view>
						<view class="order-btn xiangqing-btn" @click.stop="orderdetail(item.Id)">订单详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin, formatDate, successToShow, errorToShow } from '@/config/common.js';
import { updatePlayerOrderStatus } from '@/constant/customer.js';
import { getAppServePlayOrderInfoList } from '@/constant/schedule.js';
import liuyunoTabs from '@/components/liuyuno-tabs/liuyuno-tabs.vue';

export default {
	components: {
		liuyunoTabs
	},
	data() {
		return {
			selectStarIndex: 0,
			selectTabIndex: 0,
			orderlist: [],
			isShowEvalauteModal: false,
			isShowRefundModal: false,
			tabs: [
				{
					id: 1,
					name: '全部',
					status: ''
				},
				{
					id: 2,
					name: '待接单',
					status: '20'
				},
				{
					id: 3,
					name: '待服务',
					status: '30'
				},
				{
					id: 4,
					name: '服务中',
					status: '40'
				}
			],
			query_filter: {
				playOrderStatus: '',
				keyWord: '',
				servePlayerId: uni.getStorageSync('customerId'),
				pageIndex: 0,
				pageSize: 10
			},
			orderNo: ''
		};
	},
	onLoad: function(option) {
		if (isLogin()) {
			this.getOrderList(this.query_filter);
		} else {
			toLogin();
		}
	},
	filters: {
		formatDate(_value) {
			return formatDate(new Date(_value), 'yyyy-MM-dd hh:mm');
		}
	},
	onReachBottom() {
		this.query_filter.pageIndex++;
		this.getOrderList(this.query_filter);
	},
	onPullDownRefresh() {
		this.query_filter.pageIndex = 0;
		this.getOrderList(this.query_filter);
	},
	methods: {
		async selectTab(index) {
			this.selectTabIndex = index;
			this.query_filter.playOrderStatus = this.tabs[index].status;
			this.query_filter.pageIndex = 0;
			let res = await getAppServePlayOrderInfoList(this.query_filter);
			this.orderlist = res.Source;
		},
		async getOrderList() {
			//订单列表
			let res = await getAppServePlayOrderInfoList(this.query_filter);
			uni.stopPullDownRefresh();
			if (this.query_filter.pageIndex > 0) {
				for (let i = 0; i < res.Source.length; i++) {
					let obj = res.Source[i];
					this.orderlist.push(obj);
				}
			} else {
				this.orderlist = res.Source;
			}
		},
		async updateOrderStatus(orderId, orderStatus) {
			await updatePlayerOrderStatus({
				orderId: orderId,
				playOrderStatus: orderStatus
			});
			let show_message = '';
			switch (orderStatus) {
				case 30:
					show_message = '接单成功';
					break;
				case 40:
					show_message = '开始服务';
					break;
				case 50:
					show_message = '服务结束';
					break;
				case -20:
					show_message = '拒单成功';
					break;
			}
			successToShow(show_message, res => {
				this.getOrderList();
			});
		},
		orderdetail(orderId) {
			uni.navigateTo({
				url: './detail?orderId=' + orderId
			});
		}
	}
};
</script>
<style>
@import url('../../../../css/common.css');
</style>
<style lang="scss">
.tabs {
	height: 60rpx;
	line-height: 60rpx;
	font-size: 32rpx;
	color: #000;
	display: flex;
	border-bottom: 1px solid #e5eaee;
}

.no-order {
	height: 240rpx;
	line-height: 240rpx;
	text-align: center;
	background-color: #fff;
	color: #acacac;
}

.swiper-item {
	padding: 20rpx 30rpx;
}

.order-item-card {
	background-color: #ffffff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	.order-no-top {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		color: $main-text-color-gray-33;
		.order-status {
			color: $main-text-color-main-orange;
		}
	}
	.order-item-top {
		display: flex;
		.player-header {
			width: 120rpx;
			margin-right: 20rpx;
			&-img {
				border-radius: 12rpx;
				width: 120rpx;
				height: 120rpx;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
		}

		.play-order-info {
			color: $main-text-color-gray-33;
			font-family: 'SourceHanSansCN-Regular';
			font-size: $main-text-size-28;

			&-item {
				margin-bottom: 16rpx;
				display: flex;
				.title {
					width: 140rpx;
					min-width: 140rpx;
					color: $main-text-color-gray-black;
				}
				.content {
					width: 100%;
					word-wrap: break-word;
				}
			}
		}
	}

	.order-price {
		color: $main-text-color-main-orange;
		font-size: $main-text-size-32;
		text-align: right;
		margin-bottom: 20rpx;
		&-unit {
			font-size: $main-text-size-20;
		}
	}

	.order-operation-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

.play-order-info-item .title::after {
	content: '：';
}

.stars {
	display: flex;
	margin-top: 20px;
	margin-bottom: 20px;
}

.normal-star {
	color: #adadad;
	font-size: 40rpx;
	margin-left: 10rpx;
}

.selected-star {
	color: #e6a23c;
}

.evaluate-order {
	padding: 20rpx;
	.refund-title {
		font-size: 28rpx;
		color: $main-text-color-gray-33;
		font-weight: 600;
		margin-bottom: 10rpx;
	}
	.remark-container {
		border: 2rpx solid #f5f6fd;
	}

	.remark {
		margin-left: 20rpx;
		margin-top: 20rpx;
		height: 180rpx;
		width: 90%;
		font-size: 28rpx;
		color: $main-text-color-gray-33;
	}
}
</style>
